<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>assembly组件入门</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<h3>组件入门</h3>
	<hr>
	创建组件 注册组件 使用组件
	<div id="demo1">
		<my-component></my-component>
	</div>
	<div id="demo2">
		<my-component></my-component>
	</div>
		<my-component></my-component>
	<hr>
	局部注册
	<div id="demo3">
		<my-component3></my-component3>
	</div>
	<div id="demo4">
		<my-component3></my-component3>
	</div>
	<hr>
	父子组件
	<div id="demo5">
		<parent-component>
        </parent-component>
	</div>
	<div id="demo6">
		<parent-component>
        </parent-component>
	</div>
	<hr>
	
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">
    	var myComponent=Vue.extend({
    		template:"<div><h1>这是一个组件</h1></div>",
    	})
    	Vue.component("my-component",myComponent)
    	new Vue({
    		el:"#demo1"
    	})
    	new Vue({
    		el:"#demo2"
    	})
    	new Vue({
    		el:"#demo3",
    		components:{
    			"my-component3":myComponent,
    		}
    	})
    	/*
    	局部组件注册
    	new Vue({
    		el:"#demo4"
    	})
    	*/
    	/*父子组件*/
		var b=Vue.extend({
    		template:"<h1>这是一子个组件</h1>"
    	})
    	var a=Vue.extend({
    		template :'<p>This is a Parent component</p><child></child>',

    		components: {
    			"child" : b,
    		}
    	})
    	Vue.component("parent-component",a)
		new Vue({
    		el:"#demo5"
    	})
		
		
    </script>
</body>
</html>